<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .card{
            width:90px;
            height:40px;
            /*border:1px solid;*/
            border-radius:10px 10px 0px 0px;
            float:left;
            margin-left:10px;
            padding-left:50px;
            background-color:orange;
        }
        .img1{
            width:591px;
            height:370px;
            background:url(./imgs/mm019.jpg) no-repeat ;
            background-size:590px;
            margin-top:40px;
            margin-left:10px;
            position:absolute;
            /*display:none;*/
        }

        .img2{
            width:591px;
            height:370px;
            background:url(./imgs/mm020.jpg) no-repeat ;
            background-size:590px;
            margin-top:40px;
            margin-left:10px;
            position:absolute;
            /*display:none;*/
        }
        .img3{
            width:591px;
            height:370px;
            background:url(./imgs/mm021.jpg) no-repeat ;
            background-size:590px;
            margin-top:40px;
            margin-left:10px;
            position:absolute;
            /*display:none;*/
        }
        .img4{
            width:591px;
            height:370px;
            background:url(./imgs/mm022.jpg) no-repeat ;
            background-size:590px;
            margin-top:40px;
            margin-left:10px;
            position:absolute;
            /*display:none;*/
        }
    </style>
</head>
<body>
    <h1></h1>
    <hr>
  <div>
      <div class="card" id="div1">图一</div>
      <div class="card" id="div2">图二</div>
      <div class="card" id="div3">图三</div>
      <div class="card" id="div4">图四</div>
  </div> 
<div>
    
</div> 
      <div class="img1" id="img1" style="display:none;"></div>  
      <div class="img2" id="img2" style="display:none;"></div>  
      <div class="img3" id="img3" style="display:none;"></div>  
      <div class="img4" id="img4" style="display:none;"></div>  
    
   <script>
        
        div1.onmouseover = function(){
            var image1 = document.getElementById('img1');
            // console.log(image.getAttribute('style'));
            image1.style.display = 'block';
            div1.onmouseout = function(){
                // alert('asd');
            // image1.style.display = 'none';
            }
        }   
    
        div2.onmouseover = function(){
            var image1 = document.getElementById('img2');
            // console.log(image.getAttribute('style'));
            image1.style.display = 'block';
            div2.onmouseout = function(){
                // alert('asd');
            image1.style.display = 'none';
            }
        }
        div3.onmouseover = function(){
            var image1 = document.getElementById('img3');
            // console.log(image.getAttribute('style'));
            image1.style.display = 'block';
            div3.onmouseout = function(){
                // alert('asd');
            image1.style.display = 'none';
            }
        }
        div4.onmouseover = function(){
            var image1 = document.getElementById('img4');
            // console.log(image.getAttribute('style'));
            image1.style.display = 'block';
            div4.onmouseout = function(){
                // alert('asd');
            image1.style.display = 'none';
            }
        }   

   </script> 





</body>
</html>